<template>
	<view class="mainbox">
	<view class="background-wrapper">
		<view class="quiz-cover" 
		@touchstart="touchStart"
		@touchmove="touchMove"
		@touchend="touchEnd"
		:class="[isLuminous ? 'luminous' : 'normal']">
			<view>
				<text class="quiz-title">{{quizTitle}}</text>
				<text class="quiz-discription">{{beginTime}}</text>
				<text class="quiz-discription">{{endTime}}</text>
				<text class="quiz-discription">{{totalTime}}</text>
			</view>
		</view>
		
		<!-- <view class="text-area">
			<text class="title">{{quizStatus}}</text>
		</view> -->
		<button @click='onQuizStart' class="start-button">开始答题</button>
		<!-- <button @click='onTest'>测试接口用</button> -->
		<view class="nav-bar">
			<button class="nav-option" @click="onNavOption(options[0])">
				<uni-icons class="icons" type="calendar" size="40"></uni-icons>
				<text>{{options[0]}}</text>
			</button>
			<button class="nav-option" @click="onNavOption(options[1])">
				<uni-icons class="icons" type="paperclip" size="40"></uni-icons>
				<text>{{options[1]}}</text>
			</button>
			<button class="nav-option" @click="onNavOption(options[2])">
				<uni-icons class="icons" type="more" size="40"></uni-icons>
				<text>{{options[2]}}</text>
			</button>
			<button class="nav-option" @click="onNavOption(options[3])">
				<uni-icons class="icons" type="gear" size="40"></uni-icons>
				<text>{{options[3]}}</text>
			</button>
		</view>
		
	</view>
	</view>
</template>

<script setup>
	import { onMounted,ref, watch } from 'vue'
	const quizStatus = ref('未选择题库')
	const quizCount = ref(0)
	const quizTitle = ref('')
	const options = ['题库', '错题集', '历史记录', '设置']
	const optionsIcon = ['calender']
	const selectedStatus = ref('未选中')
	const checkboxValue = ref('')

	
	const isLuminous = ref(false)
	const quizSelect = () =>{
		if(selectedStatus.value == '未选中'){
			selectedStatus.value = '已选中'		
			quizCount.value++;
		}
		else{
			selectedStatus.value = '未选中'	
			quizCount.value--;
		}
	}
	
	watch(quizCount, ((newValue) => {
		if(newValue == 0){
			quizStatus.value = '未选择题库'
			isLuminous.value = false;
		}
		else{
			quizStatus.value = '已选择题库'
			isLuminous.value = true;
			console.log(getApp().globalData.examPaperId + ':' + paperIndex.value)
		}
	}))
	const onQuizStart = () => {
		if(selectedStatus.value == '未选中'){
			uni.showToast({
				title: '未选择试卷',
				icon: 'error',
				duration: 1000
			});
			return false;
		}
		console.log('onQuizStart')
		uni.navigateTo({
			url: '/pages/exam/exam'
		});
	}
	
	const onNavOption = (optionName) => {
		console.log(optionName + ' Clicked')
		switch(optionName){
			case '题库': 
				uni.navigateTo({
					url: '/pages/library/library'
				});
				break;
			case '错题集':
				uni.navigateTo({
					url: '/pages/collection/collection'
				});
				break;
			case '历史记录':
				uni.navigateTo({
					url: '/pages/history/history'
				});
				break;
			case '设置':
				uni.navigateTo({
					url: '/pages/setting/setting'
				});
				break;
			default: break;
		}
		
		
	}
	
	onMounted(() => {
		console.log('onMounted')
		onUserLogin()
	})
	
	const onTest = () =>{
		console.log('TEST:')
		
	}
	
	const token = ref(0)
	const onUserLogin = () =>{
		uni.request({
		    url: 'http://localhost:11000/courseSystem/auth/login',
		    method: 'POST',
			data: {
		         "username": "gejrgn", //Available: "gejrgn","admin" or "wsqyh"
		         "password": "123456"
		    },
		    success: (res) => {
		        //console.log(res.data);
				token.value = res.data.token;
				getApp().globalData.userToken = res.data.token;
				setTimeout(() => {
					getAllPapers()
				}, 100);
				
		    }
		});
	}
	
	const examPapers = ref([]);
	const beginTime = ref('');
	const endTime = ref('');
	const totalTime = ref('');
	const paperIndex = ref(0);
	const paperListLength = ref(0);
	const getAllPapers = () =>{
		uni.request({
		    url: 'http://localhost:11000/courseSystem/paper/allPapers', 
		    method: 'GET',
		    header: {
		        'token': token.value
		    },
		    success: (res) => {
				examPapers.value = res.data.data;
				console.log(examPapers.value)
				paperListLength.value = examPapers.value.length;
				getApp().globalData.examPaperId = examPapers.value[0].id;
				quizTitle.value = examPapers.value[0].paperName;
				beginTime.value = "开始时间：" + examPapers.value[0].beginTime;
				endTime.value = "截止时间：" + examPapers.value[0].endTime;
				totalTime.value = "时长：" + examPapers.value[0].totalTime + "分钟";
		    }
		});
	}
		
	const setHomePaper = (index) =>{
		console.log(examPapers.value[index].id)
		quizCount.value = 0;
		selectedStatus.value = '未选中'
		getApp().globalData.examPaperId = examPapers.value[index].id;
		getApp().globalData.teacherId =examPapers.value[index].teacherId;
		quizTitle.value = examPapers.value[index].paperName;
		beginTime.value = "开始时间：" + examPapers.value[index].beginTime;
		endTime.value = "截止时间：" + examPapers.value[index].endTime;
		totalTime.value = "时长：" + examPapers.value[index].totalTime + "分钟";
	}
	const startX = ref(0);
	const deltaX = ref(0);
	const touchStart = (event) =>{
	      startX.value = event.touches[0].clientX;
	    }
	const touchMove = (event) =>{
	    const currentX = event.touches[0].clientX;
	    deltaX.value = currentX - startX.value;
	}
	const touchEnd = () =>{
		// 判断滑动方向
	    if (deltaX.value > 50) {
			// 向右滑动逻辑   这里只建议写一些性能消耗小的逻辑，比如：this.status = !this.status 因为当他的横坐标大于或小于50时，每隔一个数字都会执行一次，所以...非常消化性能
	        //console.log('向右滑动逻辑')
			paperIndex.value--
			if(paperIndex.value >= 0){
				setHomePaper(paperIndex.value)
			}
			else{
				paperIndex.value = paperListLength.value - 1;
				setHomePaper(paperIndex.value)
			}
			
			
	    } else if (deltaX.value < -50) {
	        // 向左滑动逻辑   这里只建议写一些性能消耗小的逻辑，比如：this.status = !this.status 因为当他的横坐标大于或小于50时，每隔一个数字都会执行一次，所以...非常消化性能
			//console.log('向左滑动逻辑')
			paperIndex.value++	
			if(paperIndex.value <= paperListLength.value - 1){
				setHomePaper(paperIndex.value)
			}
			else{
				paperIndex.value = 0;
				setHomePaper(paperIndex.value)
			}
			
	    } else{
			//console.log('未明显移动')
			quizSelect()
		}
	    // 清除触摸起始点记录，这里也可以写一些比较复杂的逻辑，每滑动一次松后执行。
		deltaX.value = 0;
	}
	
	
</script>

<style>
	.background-wrapper {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-image: url('https://sjbz-fd.zol-img.com.cn/t_s720x1280c/g5/M00/00/02/ChMkJ1fJVEqIf7vOAAtnTx--MtQAAU9wQAAAAAAC2dn323.jpg');
		background-size: cover;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.quiz-cover{
		bottom: 0;
		margin: 50rpx;
		margin-top: 100rpx;
		padding-top: 50rpx;
		line-height: 60rpx;
		/* border-style: solid; */
		border-radius: 32rpx;
		border-width: 1rpx;
		width: 600rpx;
		height: 600rpx;
		text-align: center;
		justify-content: center;
		background-color: aqua;
		opacity: 0.8;
	}
	.quiz-title{
		line-height: 50rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		font-size: 48rpx;
		font-weight: bold;
	}
	.quiz-discription{
		display:block;
	}
	.text-area {
		display: flex;
		justify-content: center;
	}
	.title {
		font-size: 40rpx;
	}
	.start-button{
		width: 360rpx;
		font-weight: bold;
		border-radius: 30rpx;
		border-width: 1rpx;
		border-style: solid;
		font-size: 40rpx;
		opacity: 0.8;
	}
	.nav-bar{
		margin-top: 200rpx;
	}
	.nav-option{
		float: left;
		width: 140rpx;
		font-size: 28rpx;
		margin: 10rpx;
		padding: 0;
		background-color: aqua;
		opacity: 0.8;
		border-radius: 16rpx;
		display:flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		line-height: 60rpx;
	}
	.button-icon{
		width: 100rpx;
		height: 100rpx;
		margin: 20rpx;
	}
	.icons{
		margin-top: 20rpx;
	}
	.luminous {
		transition: all 1s cubic-bezier(0,1,0,1);
		/* inset 表示内阴影 */
		/* box-shadow: 0 3px 150upx #62d0d6 inset; */
		box-shadow: -10rpx 0rpx 50rpx #7ce2c0,
			/*左边阴影*/
			0rpx -10rpx 50rpx #65dee2,
			/*上边阴影*/
			10rpx 0rpx 50rpx #65dee2,
			/*右边阴影*/
			0rpx 10rpx 50rpx #65dee2;
	}
	.normal{
		transition: all 1s cubic-bezier(0,1,0,1);
		box-shadow: 0;
	}
</style>
